<template>
	<view class="container">
		<image class="background-image" src="/static/image-my/Frame 9529.png" mode="scaleToFill"></image>

		<!-- 直播预告部分 -->
		<view class="section">
			<text class="section-title">直播预告</text>
			<view class="prompt-box">
				<view style="display: flex;flex-direction: column;">
					<text class="prompt-text">创建直播预告</text>
					<text class="hint-text">提前预约 | 开播提醒 | 播后分析</text>
				</view>
				<button class="create-btn" :class="{ 'disabled': noticeList.length >= 3 }" @click="handleLiveNotice"
					style="background-color: rgb(44, 122, 246);">创建</button>
			</view>

			<!-- 直播预告列表 -->
			<view class="notice-item" v-for="(item, index) in noticeList" :key="index">
				<view class="notice-header">
					<view>
						<text class="notice-time">{{ formatDisplayTime(item.time) }}</text>
						<text style="font-size: 30rpx;font-weight: bold;margin-left: 10rpx;">开播</text>
					</view>
					<text class="notice-reserve">{{ item.reserveCount || 0 }}人已预约</text>
				</view>
				<text class="notice-title">{{ item.title || '未设置标题' }}</text>

				<view class="notice-actions">
					<text class="action-btn" @click="handleEditNotice(index)">编辑</text>
					<view class="divider"></view>
					<text class="action-btn" @click="handleShareNotice(index)">分享</text>
				</view>
			</view>
		</view>

		<!-- 直播回放部分 -->
		<view class="section">
			<text class="section-title">直播回放</text>

			<view v-if="playbackList.length === 0" class="prompt-box">
				<text class="empty-text">您还没有开播过~快去试试吧</text>
			</view>
			<view v-else class="playback-container">
				<!-- 回放头部 -->
				<view class="playback-header">
					<view style="display: flex;flex-direction: column;">
						<text
							style="color:rgb(44, 122, 246) ;font-weight: 700;margin-bottom: 10rpx;font-size: 30rpx;">直播回放</text>
						<text class="playback-tip" style="color: #ccc;font-size: 25rpx;">公开直播回放，让更多的粉丝看到</text>
					</view>
					<text class="playback-toggle" @click="toggleAllPlaybacks">
						{{ showAllPlaybacks ? '隐藏全部' : '公开全部' }}
					</text>
				</view>
			</view>
			<!-- 回放列表 -->
			<view class="playback-items">
				<view class="playback-month">
					<text class="playback-month-title">{{ currentMonth }}（共{{ currentMonthCount }}场）</text>
				</view>
				<view class="playback-item" v-for="(item, index) in currentMonthPlaybacks" :key="index">
					<view style="display: flex;">
						<image :src="getPlaybackCover(index)" class="playback-cover" mode="aspectFill"></image>
						<view class="playback-info">
							<text class="playback-title">{{ item.title }}</text>
							<text class="playback-time">{{ item.time }}</text>
							<text class="playback-viewers">{{ item.viewers }}人看过</text>
						</view>
					</view>
					<view class="notice-actions" style="margin-top: 20rpx;">
						<text class="action-btn" @click="handleTogglePlayback(index)">
							{{ item.isPublic ? '隐藏全部' : '公开全部' }}
						</text>
						<view class="divider"></view>
						<text class="action-btn" @click="handleWatchPlayback(index)">查看回放</text>
					</view>
				</view>
				<view class="playback-month-divider">
					<text class="playback-month-title">{{ lastMonth }}（共{{ lastMonthCount }}场）</text>
				</view>
				<view class="playback-item" v-for="(item, index) in lastMonthPlaybacks"
					:key="index + currentMonthPlaybacks.length">
					<view style="display: flex;">
						<image :src="getPlaybackCover(index + currentMonthPlaybacks.length)" class="playback-cover"
							mode="aspectFill"></image>
						<view class="playback-info">
							<text class="playback-title">{{ item.title }}</text>
							<text class="playback-time">{{ item.time }}</text>
							<text class="playback-viewers">{{ item.viewers }}人看过</text>
						</view>
					</view>
					<view class="notice-actions" style="margin-top: 20rpx;">
						<text class="action-btn" @click="handleTogglePlayback(index + currentMonthPlaybacks.length)">
							{{ item.isPublic ? '隐藏回放' : '公开回放' }}
						</text>
						<view class="divider"></view>
						<text class="action-btn"
							@click="handleWatchPlayback(index + currentMonthPlaybacks.length)">查看回放</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 创建预告弹窗 -->
		<notice :visible="showCreateModal" @close="showCreateModal = false" @create="handleCreateNotice" />

		<!-- 编辑预告弹窗 -->
		<view class="edit-notice-modal" v-if="showEditModal">
			<view class="edit-mask" @click="showEditModal = false"></view>
			<view class="edit-content">
				<view class="modal-header">
					<text class="modal-title">编辑直播预告</text>
					<view style="display: flex;">
						<view class="create-btn" @click="deleteNotice" style="color: red;margin-right: 20rpx;">删除</view>
						<view class="create-btn" @click="saveNotice" style="color: #55aaff;">保存</view>
					</view>
				</view>

				<view class="form-content">
					<view class="form-title">
						<view style="display: flex;">
							<text class="item-label">直播标题</text>
							<text style="color: red;">*</text>
						</view>

						<textarea v-model="editingNotice.title" class="intro-textarea" placeholder="请输入直播标题"
							maxlength="15" style="height: 100rpx;"></textarea>
						<text class="word-count">{{ editingNotice.title ? editingNotice.title.length : 0 }}/15</text>
					</view>

					<view class="form-item" @click="openTimePicker">

						<view style="display: flex;">
							<text class="item-label">开播时间</text>
							<text style="color: red;">*</text>
						</view>

						<view class="item-value">
							<text class="time-text" :class="{placeholder: !editingNotice.time}">
								{{ formatDisplayTime(editingNotice.time) || '请选择' }}
							</text>
							<uni-icons type="right" size="20"></uni-icons>
						</view>
					</view>

					<view class="form-item">
						<text class="item-label">预告封面</text>
						<view class="cover-upload" @click="chooseCover">
							<image v-if="editingNotice.cover" :src="editingNotice.cover" class="cover-image"
								mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<text class="plus-icon">+</text>
							</view>
						</view>
					</view>

					<view class="form-item">
						<text class="item-label">直播介绍</text>
						<textarea v-model="editingNotice.introduction" class="intro-textarea"
							placeholder="直播介绍可以更好的帮助观众了解您的直播内容" maxlength="100"></textarea>
						<text
							class="word-count">{{ editingNotice.introduction ? editingNotice.introduction.length : 0 }}/100</text>
					</view>
				</view>

				<!-- 时间选择器弹框 -->
				<view v-if="showTimePicker" class="time-picker-modal">
					<view class="picker-mask" @click="cancelTimePicker"></view>
					<view class="picker-content">
						<view class="picker-header">
							<text class="picker-title">选择开播时间</text>
							<text class="picker-tip">请选择1小时后-7天内的直播时间</text>
						</view>
						<picker-view :value="pickerValue" @change="handleTimeChange" class="time-picker"
							indicator-style="height: 80rpx;">
							<picker-view-column>
								<view v-for="(item,index) in days" :key="index" class="picker-item">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in hours" :key="index" class="picker-item">{{item}}时</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item,index) in minutes" :key="index" class="picker-item">{{item}}分</view>
							</picker-view-column>
						</picker-view>
						<view class="picker-buttons">
							<button class="picker-btn cancel" @click="cancelTimePicker">取消</button>
							<button class="picker-btn confirm" @click="confirmTimePicker">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import notice from '@/pages/notice/notice.vue'
	export default {
		components: {
			notice,
		},
		data() {
			const now = new Date()
			// 计算最小可选时间（当前时间+1小时）
			const minTime = new Date(now.getTime() + 60 * 60 * 1000)
			// 计算最大可选时间（当前时间+7天）
			const maxTime = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)

			return {
				showCreateModal: false,
				showEditModal: false,
				showTimePicker: false,
				showAllPlaybacks: true,
				editingIndex: -1,
				noticeList: [],
				editingNotice: {
					time: '',
					title: '',
					cover: '',
					introduction: '',
					reserveCount: 0,
					status: '未开始'
				},
				// 时间选择器相关数据
				minTime,
				maxTime,
				pickerValue: this.getInitialPickerValue(minTime),
				days: this.generateDaysArray(),
				hours: Array.from({
					length: 24
				}, (_, i) => i),
				minutes: Array.from({
					length: 60
				}, (_, i) => i),
				tempTime: null,
				// 直播回放数据
				playbackList: [{
						title: "过有品质的生活",
						time: "12-11 20:00:00",
						viewers: 34,
						date: "2025-07-15",
						isPublic: true
					},
					{
						title: "健康模拟",
						time: "12-11 20:00:00",
						viewers: 34,
						date: "2025-07-20",
						isPublic: true
					},
					{
						title: "大健康环境",
						time: "12-11 20:00:00",
						viewers: 34,
						date: "2025-06-10",
						isPublic: true
					}
				],
				showLastMonth: false
			}
		},
		computed: {
			currentMonth() {
				return "2025年7月";
			},
			lastMonth() {
				return "2025年6月";
			},
			currentMonthPlaybacks() {
				return this.playbackList.filter(item => item.date.includes('2025-07'));
			},
			lastMonthPlaybacks() {
				return this.playbackList.filter(item => item.date.includes('2025-06'));
			},
			currentMonthCount() {
				return this.currentMonthPlaybacks.length;
			},
			lastMonthCount() {
				return this.lastMonthPlaybacks.length;
			}
		},
		onLoad() {
			const storedNotices = uni.getStorageSync('liveNotices')
			if (storedNotices) {
				this.noticeList = JSON.parse(storedNotices)
			}
		},
		watch: {
			noticeList: {
				deep: true,
				handler(newVal) {
					uni.setStorageSync('liveNotices', JSON.stringify(newVal))
				}
			}
		},
		methods: {
			// 统一格式化显示时间
			formatDisplayTime(time) {
				if (!time) return "";

				let date;
				// 如果是 Date 对象
				if (time instanceof Date) {
					date = time;
				}
				// 如果是 ISO 格式
				else if (time.includes("T")) {
					date = new Date(time);
				}
				// 如果是自定义格式 "YYYY-MM-DD HH:mm"
				else if (time.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/)) {
					const [datePart, timePart] = time.split(' ');
					const [year, month, day] = datePart.split('-').map(Number);
					const [hour, minute] = timePart.split(':').map(Number);
					date = new Date(year, month - 1, day, hour, minute);
				} else {
					date = new Date(time);
				}
				// 如果解析失败，返回原始值
				if (isNaN(date.getTime())) return time;
				return `${date.getFullYear()}-${this.addZero(date.getMonth() + 1)}-${this.addZero(date.getDate())} ${this.addZero(date.getHours())}:${this.addZero(date.getMinutes())}`;
			},

			// 生成初始时间选择器值
			getInitialPickerValue(minTime) {
				const now = new Date()
				const dayDiff = Math.floor((minTime - now) / (24 * 60 * 60 * 1000))
				return [
					Math.max(0, dayDiff),
					minTime.getHours(),
					minTime.getMinutes()
				]
			},

			// 生成日期数组（YYYY-MM-DD格式）
			generateDaysArray() {
				const days = []
				const now = new Date()
				for (let i = 0; i < 7; i++) {
					const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000)
					days.push(`${date.getFullYear()}-${this.addZero(date.getMonth() + 1)}-${this.addZero(date.getDate())}`)
				}
				return days
			},

			handleLiveNotice() {
				if (this.noticeList.length >= 3) {
					uni.showToast({
						title: '最多只能创建3个直播预告',
						icon: 'none'
					})
					return
				}
				this.editingNotice = {
					time: '',
					title: '',
					cover: '',
					introduction: '',
					reserveCount: 0,
					status: '未开始'
				}
				this.showCreateModal = true
			},

			handleCreateNotice(data) {
				if (!data.time) {
					uni.showToast({
						title: '请选择开播时间',
						icon: 'none'
					})
					return
				}
				if (!data.title) {
					uni.showToast({
						title: '请输入直播标题',
						icon: 'none'
					})
					return
				}

				const newNotice = {
					...data,
					reserveCount: 0,
					status: '未开始'
				}
				this.noticeList.unshift(newNotice)
				uni.showToast({
					title: '预告创建成功',
					icon: 'success'
				})
				this.showCreateModal = false
			},

			handleEditNotice(index) {
				this.editingIndex = index
				this.editingNotice = JSON.parse(JSON.stringify(this.noticeList[index]))
				this.showEditModal = true
			},

			handleShareNotice(index) {
				const notice = this.noticeList[index]
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: `直播预告：${notice.title || '未命名直播'}`,
					summary: `${this.formatDisplayTime(notice.time)} 开播：${notice.introduction || '无详细介绍'}`,
					imageUrl: notice.cover,
					success: res => console.log('分享成功:', res),
					fail: err => console.log('分享失败:', err)
				})
			},

			deleteNotice() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这条直播预告吗？',
					success: (res) => {
						if (res.confirm) {
							this.noticeList.splice(this.editingIndex, 1)
							this.showEditModal = false
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
						}
					}
				})
			},

			saveNotice() {
				if (!this.editingNotice.time) {
					uni.showToast({
						title: '请选择开播时间',
						icon: 'none'
					})
					return
				}
				if (!this.editingNotice.title) {
					uni.showToast({
						title: '请输入直播标题',
						icon: 'none'
					})
					return
				}

				if (this.editingIndex >= 0) {
					this.noticeList.splice(this.editingIndex, 1, this.editingNotice)
				} else {
					this.noticeList.unshift(this.editingNotice)
				}
				this.showEditModal = false
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
			},

			chooseCover() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.editingNotice.cover = res.tempFilePaths[0]
					}
				})
			},

			// 时间选择器处理
			openTimePicker() {
				this.showTimePicker = true
				if (this.editingNotice.time) {
					try {
						const formattedTime = this.formatDisplayTime(this.editingNotice.time)
						const [dateStr, timeStr] = formattedTime.split(' ')
						if (dateStr && timeStr) {
							const dayIndex = this.days.findIndex(day => day === dateStr)
							if (dayIndex !== -1) {
								const [hour, minute] = timeStr.split(':').map(Number)
								this.pickerValue = [dayIndex, hour, minute]
							}
						}
					} catch (e) {
						console.error('时间解析失败:', e)
					}
				}
			},

			cancelTimePicker() {
				this.showTimePicker = false
			},

			confirmTimePicker() {
				if (!this.tempTime) {
					this.tempTime = this.formatPickerTime(this.pickerValue)
				}

				const selectedTime = this.parseTimeToDate(this.tempTime)
				if (selectedTime < this.minTime) {
					uni.showToast({
						title: '请选择1小时后的时间',
						icon: 'none'
					})
					return
				}
				if (selectedTime > this.maxTime) {
					uni.showToast({
						title: '最多可预约7天内的直播',
						icon: 'none'
					})
					return
				}

				this.editingNotice.time = this.tempTime
				this.showTimePicker = false
			},

			handleTimeChange(e) {
				this.pickerValue = e.detail.value
				this.tempTime = this.formatPickerTime(this.pickerValue)
			},

			// 格式化时间为YYYY-MM-DD HH:mm
			formatPickerTime(value) {
				const [dayIdx, hourIdx, minuteIdx] = value
				const baseDate = new Date()
				baseDate.setDate(baseDate.getDate() + dayIdx)

				const year = baseDate.getFullYear()
				const month = this.addZero(baseDate.getMonth() + 1)
				const day = this.addZero(baseDate.getDate())
				const hour = this.addZero(this.hours[hourIdx])
				const minute = this.addZero(this.minutes[minuteIdx])

				// 确保返回格式为YYYY-MM-DD HH:mm
				return `${year}-${month}-${day} ${hour}:${minute}`
			},

			// 字符串转日期对象
			parseTimeToDate(timeStr) {
				const [datePart, timePart] = timeStr.split(' ')
				const [year, month, day] = datePart.split('-').map(Number)
				const [hour, minute] = timePart.split(':').map(Number)
				return new Date(year, month - 1, day, hour, minute)
			},

			addZero(num) {
				return num < 10 ? `0${num}` : num
			},

			// 切换单个回放的公开状态
			handleTogglePlayback(index) {
				this.playbackList[index].isPublic = !this.playbackList[index].isPublic;
				uni.showToast({
					title: this.playbackList[index].isPublic ? '已公开回放' : '已隐藏回放',
					icon: 'none'
				});
			},

			// 切换所有回放的公开状态
			toggleAllPlaybacks() {
				this.showAllPlaybacks = !this.showAllPlaybacks;
				this.playbackList.forEach(item => {
					item.isPublic = this.showAllPlaybacks;
				});
				uni.showToast({
					title: this.showAllPlaybacks ? '已公开全部回放' : '已隐藏全部回放',
					icon: 'none'
				});
			},

			getPlaybackCover(index) {
				// 这里根据索引返回对应封面图片路径，示例中使用本地图片，实际应从数据中获取
				const covers = [
					'/static/logo.png',
					'/static/logo.png',
					'/static/logo.png',
					'/static/logo.png'
				];
				return covers[index % covers.length];
			},

			handleWatchPlayback(index) {
				// 查看回放逻辑
				uni.showToast({
					title: '正在打开回放',
					icon: 'none'
				});
				uni.navigateTo({
					url: '/pages/playback/playback'
				});
			},

			toggleLastMonth() {
				this.showLastMonth = !this.showLastMonth;
			}
		}
	}
</script>

<style>
	/* 容器样式 */
	.container {
		position: relative;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		z-index: 0;
	}

	/* 分区样式 */
	.section {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		z-index: 1;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 提示框样式 */
	.prompt-box {
		background-color: #fff;
		border-radius: 22rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #eee;
	}

	/* 创建直播预告文字 */
	.prompt-text {
		font-size: 32rpx;
		color: rgb(44, 122, 246);
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	/* 创建按钮 */
	.create-btn {
		font-size: 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0;
		color: #fff;
	}

	.create-btn.disabled {
		background-color: rgb(121, 136, 158);
	}



	/* 提示文字 */
	.hint-text {
		font-size: 24rpx;
		color: #999;
	}

	/* 空状态文字 */
	.empty-text {
		font-size: 32rpx;
		color: #999;
		width: 100%;
		text-align: center;
	}

	/* 直播预告项样式 */
	.notice-item {
		background-color: #fff;
		border-radius: 22rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #eee;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.playback-toggle {
		background-color: rgb(44, 122, 246);
		padding: 20rpx;
		color: #fff;
		border-radius: 23rpx;
	}

	.notice-header {
		display: flex;
		flex-direction: column;
	}

	.notice-time {
		font-size: 32rpx;
		color: #1E90FF;
		font-weight: bold;
	}

	.notice-reserve {
		font-size: 24rpx;
		color: #999;
		margin: 10rpx 0;
	}

	.notice-title {
		font-size: 30rpx;
		color: #333;
		font-weight: 700;
	}

	.notice-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding: 20rpx;
		background-color: rgb(247, 247, 247);
	}

	.action-btn {
		display: flex;
		justify-content: center;
		width: 300rpx;
		font-size: 28rpx;
		color: #333;
	}

	.divider {
		width: 2rpx;
		height: 28rpx;
		background-color: rgb(217, 217, 217);
	}

	/* 直播回放样式 */
	.playback-container {
		background-color: #fff;
		border-radius: 22rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #eee;
	}

	.playback-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.playback-month {
		display: flex;
		align-items: center;
	}

	.playback-month-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.playback-items {
		background-color: #fff;
		border-radius: 22rpx;
		padding: 0 30rpx 30rpx 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #eee;
	}

	.playback-item {
		display: flex;
		flex-direction: column;
		/* 	justify-content: space-between;
		align-items: center; */
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.playback-cover {
		width: 180rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.playback-info {
		flex: 1;
		margin: 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 120rpx;
	}

	.playback-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.playback-time {
		font-size: 24rpx;
		color: #999;

	}

	.playback-viewers {
		font-size: 24rpx;
		color: #999;
	}

	.playback-actions {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.playback-hide {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.playback-watch {
		font-size: 26rpx;
		color: #1E90FF;
	}

	.playback-month-divider {
		margin: 30rpx 0;
	}

	.toggle-month {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.toggle-text {
		font-size: 28rpx;
		color: #1E90FF;
	}

	/* 编辑弹窗样式 */
	.edit-notice-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.edit-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.edit-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 80vh;
		overflow-y: auto;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.form-content {
		padding: 30rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.item-label {
		display: block;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.item-value {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.time-text {
		font-size: 28rpx;
		color: #333;
	}

	.time-text.placeholder {
		color: #999;
	}

	.cover-upload {
		width: 200rpx;
		height: 200rpx;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cover-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.upload-placeholder {
		text-align: center;
	}

	.plus-icon {
		font-size: 60rpx;
		color: #ccc;
		line-height: 1;
	}

	.intro-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333;
	}

	.word-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 时间选择器样式 */
	.time-picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1003;
	}

	.picker-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.picker-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.picker-header {
		text-align: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.picker-title {
		font-size: 32rpx;
		color: #333;
	}

	/* 添加时间选择器提示样式 */
	.picker-tip {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-top: 10rpx;
	}

	.time-picker {
		width: 100%;
		height: 500rpx;
	}

	.picker-item {
		font-size: 32rpx;
		text-align: center;
	}

	.picker-buttons {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.picker-btn {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	.cancel {
		background-color: #f5f5f5;
		color: #333;
	}

	.confirm {
		background-color: #55aaff;
		color: #fff;
	}
</style>